<template>
	<u-popup :show="visible" @close="close" @open="open" mode="right">
		<view class="container" :style="{paddingTop: top + height + 15 + 'px'}">
			<!-- <view class="section" v-if="type != 4">
				<view class="title">选择城市</view>
				<view class="buttons">
					<view :class="!PositioningCity ? 'button active' : 'button'"
						@click="setValue('','PositioningCity')">同城</view>
				</view>
			</view> -->
			
		<!-- 	<view class="section" v-if="type == 1">
				<view class="title">按访问量</view>
				<view class="buttons">
					<view :class="visits === it.order ? 'button active' : 'button'"
						v-for="it in searchInfo.TrafficVolume" @click="setValue(it.order,'visits')">{{it.name}}</view>
				</view>
			</view> -->

			<view class="section" v-if="type == 1 && circle_id > 0">
				<view class="title">身份</view>
				<view class="buttons">
					<view :class="identity === it.name ? 'button active' : 'button'"
						v-for="it in searchInfo.identity" @click="setValue(it.name,'identity')">{{it.name}}</view>
				</view>

			</view>
<!-- 			<view class="section" v-if="type != 3">
	
				<view class="subtitle">热门城市</view>
				<view class="hot-cities">
					<view :class="PositioningCity === it.id ? 'button active' : 'button'"
						v-for="it in searchInfo.SearchFrequency" @click="setValue(it.id,'PositioningCity', it.name)">{{it.name}}</view>
				</view>
			</view> -->

			<view class="section">
				<view class="section-item" v-for="(it,index) in searchInfo.positioning_city" @click="setValue(it.id,'PositioningCity',it.name)">
					<view class="section-item-title" :style="{color: index > 2 ? '#000' : '#FFC000'}">{{index + 1}}</view>
					<view class="section-item-cities">
						
						<view :class="PositioningCity === it.id ? 'section-item-city section-item-city-ac' : 'section-item-city'">
							
							<text>{{it.name}}</text>
							<text style="margin-left: auto;margin-right: 30rpx;color: #FFC000;" v-if="type != 3">{{it.number ? it.number + '人' : ''}}</text>
							<image :src="ossUrl +  '/static/image/gou.png'" mode="" :style="{opacity: PositioningCity === it.id ? 1 : 0}"></image>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="120"></u-gap>
			<view class="footer">
				<view class="footer-button" @click="cancle">{{canclxeTx}}</view>
				<view class="footer-button confirm" @click="submit">确定</view>
			</view>
		</view>
	</u-popup>

</template>

<script>
	export default {
		props: {
			searchInfo: {
				type: Object,
				default: () => {}
			},
			value: {
				type: Object,
				default: () => {}
			},
			type: {
				type: Number,
				default: () => 1 //1 名片 2 排行榜 3商品列表 4 圈子
			},
			canclxeTx: {
				type: String,
				default: () => "取消"
			},
			//圈id
			circle_id: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {
				visible: false,
				top: 0,
				height: 0,
				visits: '',
				identity: '',
				PositioningCity: '',
				PositioningCityName: ''
			};
		},
		watch:{
			searchInfo:{
				handler(val){
					
					if(Array.isArray(val.TrafficVolume) && val.TrafficVolume.length > 0) {
						this.visits = val.TrafficVolume[0].order
					}
				},
				deep:true
			}
		},
		created() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();
			this.top = menuButtonRect.top
			this.height = menuButtonRect.height

		},
		methods: {
			open(){
				
			},
			show() {
				// console.log('open');
				this.identity = ''
				this.PositioningCity = ''
				this.visible = true
			},
			close() {
				this.visible = false
				console.log('close');
			},
			setValue(id, name, cityName) {
				if(this[name] === id) {
					this[name] = ''
					this.PositioningCityName = ''
				} else {
					this[name] = id
					this.PositioningCityName = cityName
				}
				console.log('this..',this[name])
			},
			submit(){
				if(this.$props.type === 4) {
					
					this.visible = false
					this.$emit('submit', this.PositioningCityName)
				} else {
					let d = {
						identity: this.identity,
						PositioningCity: this.PositioningCity,
						visits: this.visits
					}
					this.visible = false
					this.$emit('submit', d)
				}
				
			},
			cancle() {
				if(this.$props.type === 4) {
					
					this.visible = false
					this.$emit('submit', undefined)
				} else {
					let d = {
						identity: '',
						PositioningCity: '',
					}
					this.visible = false
					this.$emit('submit', d)
				}
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #FFFFFF;
		width: 568rpx;

		padding: 16px;
		padding-top: 80px;
		height: 100vh;
		overflow-y: scroll;
		position: relative;
	}

	.section {
		margin-bottom: 20px;
	}

	.title {
		width: 100%;
		margin-bottom: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #131313;
	}

	.buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.button {

		height: 56rpx;
		background: #F4F4F4;
		border-radius: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #131313;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 32rpx;
	}

	.active {
		background-color: #D0F4E6;
		color: #58A889;
	}

	.subtitle {
		font-size: 14px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.hot-cities {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.cities {
		display: flex;
		flex-direction: column;
	}

	.city {
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
		cursor: pointer;
	}

	.city.active {
		color: #5cb85c;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #e0e0e0;
		width: 632rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		right: 0;
	}

	.footer-button {
		background-color: #5cb85c;
		color: #fff;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #131313;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #DDDDDD;
		height: 120rpx;
		flex: 1;
	}

	.footer-button.confirm {
		height: 120rpx;
		background-color: #5cb85c;
		color: #fff;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #12B475;
		flex: 1;
	}

	.section-item {
		width: 100%;
		display: flex;

		.section-item-title {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
			padding: 0 60rpx 0 40rpx;

		}

		.section-item-cities {
			flex: 1;
			min-width: 0;

			.section-item-city {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				padding-bottom: 20rpx;
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #DDDDDD;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image {
					width: 30rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
			}
			.section-item-city-ac {
				color: #12B475;
			}
		}
	}
</style>